import Vue from 'vue'
import chinaMap from './geoJson/china.json'
let vm = new Vue();
/**
 *
 * @param {*} dom
 * @param {*} seriesName 图表名称
 * @param {*} formatterTitle 中间名称
 * @param {*} data 图表值
 * @param {*} total 图表中间值
 */
let pieChart = function (dom,seriesName,formatterTitle,data,total) {
    let myChart = vm.$echarts.init(dom);
    let option = {
        color: [
            "#5470c6",
            "#91cc75",
            "#fac858",
            "#ee6666",
            "#73c0de",
            "#3ba272",
            "#fc8452",
            "#9a60b4",
            "#ea7ccc",
        ],
        tooltip: {
            trigger: "item",
        },
        // legend: {
        //   top: '30%',
        //   left: '5%',
        //   orient:'vertial'
        // },
        series: [
            {
                name: seriesName||'seriesName',
                type: "pie",
                center: ["50%", "50%"],
                radius: ["60%", "70%"],
                itemStyle: {
                    borderRadius: 10,
                    borderColor: "#fff",
                    borderWidth: 2,
                },
                avoidLabelOverlap: false,
                label: {
                    show: true,
                    position: "center",
                    formatter: [`{a|${total || 0}}`, `{b|${formatterTitle|| 'formatterTitle'}}`].join("\n"),
                    rich: {
                        a: {
                            fontSize: "30px",
                            fontWeight: "bold",
                        },
                        b: {
                            color: "#666",
                            lineHeight: 40,
                        },
                    },
                },
                data:data||
                 [
                    { value: 1048, name: "18-30岁" },
                    { value: 735, name: "31-40岁" },
                    { value: 580, name: "41-50岁" },
                    { value: 300, name: "50-60岁" },
                    { value: 300, name: "60岁以上" },
                ],
            },
        ],
    };
    option && myChart.setOption(option);
}
/**
 * 折线图
 * @param {*} dom
 * @param {*} seriesName 图表名称
 * @param {*} yAxis 纵坐标名称
 * @param {*} xAxisData 横坐标值
 * @param {*} seriesData 图表值
 * @param {*} type line OR bar
 */
let lineChart = function (dom,seriesName,yAxis,xAxisData,seriesData,type) {
    let myChart = vm.$echarts.init(dom);
    let option = {
        legend: {
            data: [seriesName||'seriesName']
        },
        tooltip: {
            trigger: 'axis'
          },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: xAxisData||['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: yAxis.name||'yAxisName',
                min: yAxis.min||0,
                max:yAxis.max|| 250,
                interval: yAxis.interval || 50,
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
        series: [
            {
                name: seriesName||'seriesName',
                type: type||'bar',
                data:seriesData|| [
                    2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
                ]
            }
        ]
    };
    option && myChart.setOption(option);
}

let barChart = function (dom) {
    let myChart = vm.$echarts.init(dom);
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                // Use axis to trigger tooltip
                type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            }
        },
        legend: {
            data: ['使用', '闲置','其他']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data: ['CPU', '内存', '硬盘']
        },
        series: [
            {
                name: '使用',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                barWidth:15,
                itemStyle:{
                    borderRadius: 5
                },
                emphasis: {
                    focus: 'series'
                },
                data: [320, 302, 301]
            },
            {
                name: '闲置',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                itemStyle:{
                    borderRadius: 5
                },
                emphasis: {
                    focus: 'series'
                },
                data: [120, 132,220]
            },
            {
                name: '其他',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                itemStyle:{
                    borderRadius: 5
                },
                emphasis: {
                    focus: 'series'
                },
                data: [220, 182]
            }
        ]
    };
    option && myChart.setOption(option);
}
let mapChart = function(dom,data,i,bgColor,lineColor){
    let myChart = vm.$echarts.init(dom);
    vm.$echarts.registerMap("china", { geoJSON: chinaMap });
    // let data =[{name:'yc',value:[117.37,32.94,3000]}]

       var option = {
           title:{
               text:'产品溯源统计',
               subtext:`我们的产品走过了${data.length}个城市，被客户查询了${i}次`,
               x:'center',
               y:'top',
               textStyle:{
                   color:'#2b7',
                   fontSize:'29',
               },
               subtextStyle:{
                color:'#C0C4CC',
                fontSize:'15',
                height:'40',
                lineHeight:'40'
                }
           },
           toolbox:{},
        //    legend:{
        //        x:'left',
        //        y:'top'
        //    },
           visualMap:{
               min:0,
               max:1000,
               show:true,
               type:'piecewise',
               pieces:[
              {gt: 1500},            // (1500, Infinity]
               {gt: 900, lte: 1500},  // (900, 1500]
               {gt: 310, lte: 1000},  // (310, 1000]
               {gt: 200, lte: 300},   // (200, 300]
               {gt: 0, lte: 200, color:'#2b7'}, ],
               textStyle: {
                color: lineColor?'#ffffff':'#666'
              },
               },
           geo:{
               map:'china',
               roam:true,
               show:true,
               zoom:1.7,
               top:250,
               select:{
                disabled:false
               },
               itemStyle:{
                   borderColor:'#fff',
                   borderWidth:2,
                   areaColor:bgColor || '#e6e8eb'
               }
           },
           tooltip:{
               show:true,
               formatter:function(param,ticket,callback){
                   return `在${param.data.name}查询了${param.data.value[2]}次`
               }
           },
           series:[
            //    {
            //        type:'heatmap',
            //        coordinateSystem:'geo',
            //        data:data,
            //        name:'热力图'
            //    },
               {
                   type:'scatter',
                   symbol:'image://',
                   symbolSize:'28',
                   coordinateSystem:'geo',
                   data:data,
                   label:{
                       show:false
                   }
               }
           ],
       };
    option && myChart.setOption(option);
}

export { pieChart, lineChart,barChart,mapChart }
